<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>06_文本属性-文本隐藏</title>
        <style>
            div {
                width: 300px;
                height: 300px;
                border: 1px solid black;
                white-space: nowrap;

                /* 超出元素框的文本 显示 */
                overflow: visible;

                /* 超出元素框的文本隐藏 不会显示滚动条 */
                overflow: hidden;

                /* 多出的内容滚动条显示 */
                overflow: scroll;

                /* 浏览器自行决定  如果左右多了   那么就显示左右的滚动条
                如果上下多了 那么就显示上下的滚动条  如果文本没有溢出  那么正常显示 */
                overflow: auto;
            }
        </style>
    </head>
    <body>
        <div>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita eaque laborum at fuga aliquam culpa dolorum eveniet ipsum sint amet! Corrupti nihil voluptate laudantium, vero quod eius in sapiente tempore.
        </div>
    </body>
</html>